const tile = new ol.layer.Tile({
    source: new ol.source.XYZ({
        url: 'http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&lang=zh_cn&size=1&scale=1&style=8'
    })
})
let map = new ol.Map({
    target: 'map',
    layers: [
        tile
    ],
    view: new ol.View({
        center: [12676737.157879721, 2578348.6131051104],
        zoom: 15.4,
    })
});

fetch('./data/data.json').then(res => res.json()).then(res => {
    const features = res.map(r => {
        const {x, y} = r
        const coords = ol.proj.fromLonLat([x, y].map(Number))
        return new ol.Feature({
            geometry: new ol.geom.Point(coords),
            ...r
        })
    })
    const source = new ol.source.Vector({
        features: features
    });

    const style = new ol.style.Style({
        image: new ol.style.Circle({
            radius: 5,
            stroke: new ol.style.Stroke({
                color: '#f00'
            }),
            fill: new ol.style.Fill({
                color: 'rgba(255, 0, 0, 0.2)'
            })
        })
    })
    const vectorLayer = new ol.layer.Vector({
        source,
        style
    })
    map.addLayer(vectorLayer)
})
